<template>
	<view class="page">
		<!-- 自定义头部 start -->
		<!-- <fu-custom bgColor="bg-white" :isBack="false">
			<block slot="content">{{i18n['登录']}}</block>
		</fu-custom> -->
		<!-- 自定义头部 end -->
		<view class="solid-top"  v-if="!isShow">
			<!-- 关闭 -->
			<!-- <view class="text-right text-df padding" @tap="cancle">
				{{ i18n['跳过，看好物']}}
				<text class="cuIcon-right"></text>
			</view> -->
			<!-- logo -->
			<view class="header">
				<image src="/static/logo.png"></image>
			</view>
			<view class="name">商城</view>
			<!-- <view class="content">
				<view>{{i18n['申请获取以下权限']}}</view>
				<text>{{i18n['获得你的公开信息(昵称，头像、地区等)']}}</text>
			</view> -->
			<button v-if="canIUseGetUserProfile" class="bottom bg-white" @click="wxGetUserProfile" style="background:linear-gradient(90deg,#bffdc2,#FD9CAE) ;">
				<!-- <image class="margin-right-xs" :src="imgBaseUrl + 'weixin.png'" mode="aspectFit"></image> -->
				一键登录
			</button>
			<button v-else class="bottom bg-white" type="" open-type="getUserInfo" withCredentials="true" lang="zh_CN"
				@getuserinfo="wxGetUserInfo">
				<!-- <image class="margin-right-xs" :src="imgBaseUrl + 'weixin.png'" mode="aspectFit"></image> -->
				一键登录
			</button>
			<view class="noLoginStyle" style="color: #FD9CAE;" @click="handleJump" data-url="/pages/user/login/login-password/index">密码登录</view>
			<view class="text-center text-999 text-sm flex align-center justify-center" style="margin-top: 68rpx;">
				<image class="width-30 height-30 margin-right-xs" @click="is_select = false" v-if="is_select" :src="imgBaseUrl + 'checked.png'"></image>
				<image class="width-30 height-30 margin-right-xs" @click="is_select = true" v-else
				  :src="imgBaseUrl + 'unchecked.png'"></image>
				{{ i18n['已阅读并同意']}}
				<text class="alink margin-lr-xs" @tap="navto(1)" style="color: #FD9CAE;">《用户协议》</text>
				{{ i18n['和']}}
				<text class="alink margin-lr-xs" @tap="navto(2)" style="color: #FD9CAE;">{{i18n['《隐私政策》']}}</text>
			</view>
		</view>
		
		<view class=" section" v-if="isShow">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			  <image class="avatar-img" :src="avatarUrl" mode="scaleToFill"></image>
			</button>
			<view class="section-content flex align-center justify-between">
				<view class="tit">昵称</view><input type="nickname" class="inp" placeholder="请输入昵称" v-model="nickName" placeholder-class="inp-pl"/>
			</view>
			<button class="bottom bg-white" @click="bindTel">绑定手机号</button>
		</view>
	
	</view>
</template>

<script>
	const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	import { UPLOAD_IMAGE_URL } from "@/common/config.js";
	export default {
		data() {
			return {
				is_select:false,
				logo: global.SYSTEM_CONFIG.logo, // logo图路径
				canIUseGetUserProfile: false, // 是否支持新版的微信登录API
				user_sn: '', //推荐码
				avatarUrl: defaultAvatarUrl,
				nickName: '',
				isShow: false,
				isClick: false,
				openId: '',
				unionid: '',
				loadUrl: UPLOAD_IMAGE_URL,
			};
		},
		/**
		 * @description 新增内容
		 * @description 判断当前微信版本是否支持新版微信登录接口
		 * @author 默默
		 * */
		onLoad() {
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true;
			}
			
			if (uni.getStorageSync('COMMONINVITECODESYNC')) {
				this.user_sn = uni.getStorageSync('COMMONINVITECODESYNC');
			}
			
			console.log(this.user_sn,'sdsjfsfjkshdkjhkj')
		},
		methods: {
			//暂不登录
			noLogin(){
				uni.navigateBack()
			},
			bindTel(){
				if(this.isClick) return
				if(this.avatarUrl == defaultAvatarUrl){
					this.$message.info('请上传头像');
					return
				}
				if(!this.nickName){
					this.$message.info('请输入昵称');
					return
				}
				let result = {
					nickName: this.nickName,
					gender: 1,
					avatarUrl: this.avatarUrl,
					unionId: this.unionid,
					openId: this.openId
				}
				uni.setStorageSync('Wxinfo_tmp', result);
				this.isClick = true;
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/user/login/auth-phone/index'
					});
					this.isClick = false;
				}, 500);
			},
			onChooseAvatar(e) {
			    const { avatarUrl } = e.detail;
				uni.uploadFile({
				  url: this.loadUrl,
				  filePath: avatarUrl,
				  name: "file",
				  formData: {
				    module: "",
				    dir: "",
				  },
				  success: (uploadFileRes) => {
				    const response = JSON.parse(uploadFileRes.data);
				    if (response.code == 1) {
					  this.avatarUrl = response.data[0].path;
				    }
				  }
				});
			},
			// 取消登录
			cancle() {
				uni.navigateBack();
			},
			// 新版微信登录接口
			wxGetUserProfile() {
				if(!this.is_select){
					return this.$message.info('请阅读协议')
				}
				uni.showLoading({
					title: this.i18n['登录中...']
				});
				let code = '';
				uni.login({
					success: res => {
						code = res.code;
						this.$api
							.post(global.apiUrls.postMiniparamLogin, {
								// encryptedData: encodeURIComponent(infoRes.encryptedData),
								// iv: encodeURIComponent(infoRes.iv),
								code: code,
								invite_code: this.user_sn
							})
							.then(result => {
								result = result.data;
								console.log('后台返回登录信息', result);
								if (result.code == 1) {
									uni.hideLoading();
									// 如果后台返回来的是 result 字段,表示此账号还没有绑定过手机号 跳转到绑定手机号页面
									// 如果后台返回的是 userinfo 字段,表示已经登录成功,把用户信息存到 store 中,并返回跳转来的页面
									if (result.data.result) {
										uni.setStorageSync('Wxinfo_tmp', result.data.result);
										// this.isShow = true;
										// this.openId =  result.data.result.openId;
										// this.unionid =  result.data.result.unionid;
										// let result = {
										// 	gender: 1,
										// 	unionId: this.unionid,
										// 	openId: this.openId
										// }
										// uni.setStorageSync('Wxinfo_tmp', result);
										setTimeout(function() {
											uni.redirectTo({
												url: '/pages/user/login/auth-phone/index'
											});
										}, 500);
								
									} else if (result.data.userinfo) {
										this.$store.commit('updateUserInfo', result.data.userinfo);
										uni.navigateBack();
									}
								} else if (result.code == -999) {
									// 服务器解析参数错误
									uni.hideLoading();
									this.$message.info(result.msg);
								} else {
									uni.hideLoading();
									this.$message.info(this.i18n['授权失败，请使用其他方式登录']);
								}
							})
							.catch(err => {
								console.log('ERROR', err);
								uni.hideLoading();
								this.$message.info(err.msg);
							});
					}
				})
			
			},
			// 旧版微信登录接口
		
			// 去查看用户隐私协议
			navto(id) {
				this.$urouter.navigateTo({
					url: '/pages/user/login/user-agreement/index',
					params: {
						id: id
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 页面样式 start
	.page {
		min-height: 100vh;
		background: #fff;
		overflow: hidden;
	}

	// 页面样式 end
	.noLoginStyle{
		width: 100%;
		color: #ff7811;
		text-align: center;
		margin-top: 32rpx;
		text-decoration: underline;
	}
	// logo样式 start
	.header {
		height: 480rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		background: url(https://localelife.chunchuangkeji.cn/h5img/images/bg-1.png) no-repeat center / cover;

		image {
			width: 180rpx;
			height: 180rpx;
		}
	}
	.name {
		text-align: center;
		font-size: 40rpx;
		color: #333;
		font-weight: bold;
		margin-top: 32rpx;
	}

	// logo样式 end

	// 内容区 start
	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	// 内容区 end

	// 底部说明 start
	.bottom {
		border-radius: 40rpx;
		margin: 200rpx 56rpx 0;
		font-size: 32rpx;
		// border: 2rpx solid $theme;
		color: #fff;
		background: linear-gradient(90deg, #FFA133 0%, #FF5307 100%);

		image {
			width: 44rpx;
			height: 36rpx;
			vertical-align: middle;
		}
	}

	.bottom::after {
		display: none;
	}

	.alink {
		color: $fu-type-primary-dark;
		text-decoration: underline;
	}
	
	
	.section{
	
	  // padding-top: rpx;
	
	  margin: 300rpx 64rpx;
	
		.avatar-wrapper{
			width: 200rpx;
			height: 200rpx;
			padding: 0;
			.avatar-img{
				width: 200rpx;
				height: 200rpx;
			}
		}
		.section-content{
			border-bottom: solid 1px #eee;
			padding-bottom: 24rpx;
			margin-top: 100rpx;
			width: 600rpx;
			.tit{
				font-size: 36rpx;
				color: #333;
				font-weight: 600;
				margin-right: 32rpx;
			}
		}
		.inp{
			font-size: 36rpx;
			width: 100%;
			flex: 1;
			color: #333;
			line-height: inherit;
		}
		.inp-pl{
			font-size: 36rpx;
			color: #bfbfbf;
		}
		.bottom{
			margin: 100rpx 0;
			width: 100%;
			background: $theme;
			color: #ffffff;
			border-radius: 100rpx;
		}
	}
	
	.main{
	  margin-top: 430rpx;
	  .login-btn{
	    width: 638rpx;
	    height: 88rpx;
	    background:$theme;
	    border-radius: 50rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    color: #FFFFFF;
		  font-weight: 500;
	    margin: 0 auto;
	    .wx-pic{
	      width: 44rpx;
	      height: 44rpx;
	    }
	  }
	  .phone-btn{
	    width: 638rpx;
	    font-size: 28rpx;
	    color: #333333;
	    margin: 32rpx auto;
	    text-align: center;
	  }
	}
	
	


	// 底部说明 end
</style>
